<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>Direct Messaging</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="__CHAT__/chat_detail/css/reset.min.css">


    <link rel="stylesheet" href="__CHAT__/chat_detail/css/style.css">


</head>

<body>

<div class="wrapper">
    <div class="container">
        <div class="left">
            <div class="top">
                <input type="text" placeholder="Search" />
                <a href="javascript:;" class="search"></a>
            </div>
            <ul class="people">

                <!--<li class="person" data-chat="person1">
                    <img src="img/thomas.jpg" alt="" />
                    <span class="name">Thomas Bangalter</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">I was wondering...</span>
                </li>-->

                <li class="person" data-chat="person2">
                    <img src="/static/chat/head_img/{$receive_data.head_img}" alt="" />
                    <span class="name">{$receive_data.nick_name}</span>
                    <span class="time"></span>
                    <span class="preview"></span>
                </li>

            </ul>
        </div>


        <div class="right">
            <div class="top"><span>To: <span class="name">{$receive_data.nick_name}</span></span></div>

            <!--<div class="chat" data-chat="person1">
                <div class="conversation-start">
                    <span>Today, 6:48 AM</span>
                </div>
                <div class="bubble you">
                    Hello,
                </div>
                <div class="bubble you">
                    it's me.
                </div>
                <div class="bubble you">
                    I was wondering...
                </div>
            </div>-->

            <div class="chat" data-chat="person2">
                <div class="conversation-start">
                    <span>Today, {$date_time}</span>
                </div>

            </div>

            <input type="hidden" name="send_data" id="send_data" value="{$send_data}">
            <input type="hidden" name="receive_data" id="receive_data" value="{$receive_data}">
            <div class="write">
                <a href="javascript:;" class="write-link attach"></a>
                <input type="text" name="content" value="" id="content"/>
                <a href="javascript:;" class="write-link smiley"></a>
                <a href="javascript:;" class="write-link send"></a>
            </div>
        </div>
    </div>
</div>
<script  src="__CHAT__/chat_detail/js/index.js"></script>
</body>
<script src="__CHAT__/jquery.min.js"></script>
<script>
    var send_data = eval('(' + $("#send_data").val() + ')');
    var receive_data = eval('(' +$("#receive_data").val() + ')');
    var ws = new WebSocket("ws://127.0.0.1:8282"); //实例化
    ws.onopen = function () {
        bindUid(); //绑定用户id
        chatRecord(send_data,receive_data,send_data.id,receive_data.id);//数据初始化
        findLast(send_data.id,receive_data.id); //查询出来最后一条数据
    };

    $(".send").click(function(){
        var text = $("#content").val();
        if(text.length == ""){
            alert("发送内容不能为空");
            return false;
        }
        var send_message = '{"data":"'+text+'","type":"sayText","send_id":"'+send_data.id+'","receive_id":"'+receive_data.id+'"}';
        $(".chat").append('<div class="bubble me">'+text+'</div>');
        ws.send(send_message);
        $("#content").val("");
        saveChatData(send_data.id,receive_data.id,text);
        // saveChatData(send_data.id,receive_data.id,text);
    });

    //监听返回的消息
    ws.onmessage = function (e) {
        var data = eval('(' + e.data + ')');
        switch (data.type) {
            case 'connect':
                console.log(data.client_id+"成功进入聊天页面");
                return;
            case 'inCome':
                console.log(data.user_id+"绑定"+data.client_id);
                return;
            case 'sayText':
                executeChatContent(data);
                return;
        };
        // console.log(data.data);
    };

    //处理聊天
    function executeChatContent(data){
        if(data['send_id'] == receive_data.id){
            $(".chat").append('<div class="bubble you">'+data['data']+'</div>');
            $(".preview").html(data['data']);
        }
    }

    //持久化保存聊天数据
    function saveChatData(send_id,receive_id,text){
        $.post("{:url('saveChatData')}",{'send_id':send_id,'receive_id':receive_id,'text':text});
    }

    //绑定用户id
    function bindUid() {
        var send_message = '{"type":"userChatBindUid","user_id":"' + send_data.id + '","nick_name":"' + send_data.nick_name + '"}';
        ws.send(send_message);
    }

    function chatRecord(send,receive,send_id,receive_id){
        $.post("{:url('chatRecord')}",{'send_id':send_id,'receive_id':receive_id},function(data){
            for (var i = data.length-1;i>=0;i--){
                // console.log(data[i].send_id);
                // console.log(send_id);
                if(send_id == data[i].send_id){
                    $(".chat").append('<div class="bubble me">'+data[i].content+'</div>');
                }else{
                    $(".chat").append('<div class="bubble you">'+data[i].content+'</div>');
                }
            }
        });
    }

    // 查询出来最后一条数据
    function findLast(send_id,receive_id){
        $.post("{:url('findLast')}",{'send_id':send_id,'receive_id':receive_id},function(data){
            if(receive_id == data.send_id){
                $(".preview").html(data.content);
            }
            // console.log(receive_id);
            // console.log(data);
        })
    }
    // var send_message = '{"type":"userChatBindUid","send_id":"' + send_data.id + '","send_nick_name":"' + send_data.nick_name + '","receive_id":"'+receive_data.id+'","receive_nick_name":"'+receive_data.nick_name+'"}';
    // console.log(send_message);
</script>
</html>
